<template>
  <div class="cartContainer">
    <div class="cartContent">
      <!-- 左部内容 -->
      <div class="cart-left">
        <div class="cart-img">
          <img src="https://c1.mifile.cn/f/i/17/static/success.png" alt="" />
        </div>
        <div class="cart-info">
          <h3>已成功加入购物车!</h3>
          <span class="cartInfo-name">{{ good.name }} {{ good.value }}</span>
        </div>
      </div>
      <!-- 右部内容 -->
      <div class="cart-right">
        <a class="label go-back" @click="$router.back()">
          <span>返回上一级</span>
        </a>
        <router-link
          :to="{
            path: '/ShopCart',
            query: {
              id: good.product_id,
            },
          }"
          class="label settlement"
        >
          <span>去购物车结算</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetGoodsDetail } from '../../api/detail'
export default {
  name: 'AddCartSuccess',
  data() {
    return {
      good: {},
    }
  },
  async mounted() {
    // 获取对应id的商品信息
    const res = await reqGetGoodsDetail(this.$route.query.id)
    this.good = res
  },
}
</script>

<style lang="less" scoped>
.cartContainer {
  width: 100%;
  margin: 0 auto;
  background-color: #f5f5f5;
  .cartContent {
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    // 左部内容
    .cart-left {
      display: flex;
      .cart-img img {
        width: 64px;
        height: 64px;
        padding-right: 20px;
      }
      .cart-info {
        h3 {
          font-size: 24px;
          font-weight: 400;
          padding-bottom: 3px;
        }
      }
    }
    // 右部内容
    .cart-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .label {
        display: inline-block;
        height: 38px;
        border: 1px solid #b0b0b0;
        width: 150px;
        line-height: 38px;
        text-align: center;
        font-size: 14px;
        margin-left: 15px;
        color: #b0b0b0;
        &.settlement {
          background-color: #ff6700;
          color: #fff;
        }
      }
      .go-back:hover,
      .go-back:hover span {
        text-decoration: none;
        color: #b0b0b0;
        transition: all 0.4s;
        background-color: #fff;
      }

      .settlement:hover,
      .settlement:hover span {
        text-decoration: none;
        color: #fff;
        transition: all 0.4s;
        background-color: rgb(242, 88, 7);
      }
    }
  }
}
</style>
